<template>
  <view class="order-detail">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="goBack">
        <uni-icons type="arrow-left" size="24" color="#333"></uni-icons>
      </view>
      <view class="page-title">订单详情</view>
      <view class="more-btn" @click="showMoreOptions">
        <uni-icons type="more-filled" size="24" color="#333"></uni-icons>
      </view>
    </view>
    
    <!-- 订单状态 -->
    <view class="order-status" :class="orderInfo.statusClass">
      <view class="status-content">
        <view class="status-text">{{ orderInfo.statusText }}</view>
        <view class="status-desc">
          服务人员将于 {{ orderInfo.serviceDate }} {{ orderInfo.serviceTime }} 上门服务
        </view>
      </view>
    </view>
    
    <!-- 服务信息 -->
    <view class="info-card">
      <view class="card-title">服务信息</view>
      <view class="service-info">
        <image class="service-image" :src="orderInfo.serviceImage" mode="aspectFill"></image>
        <view class="service-detail">
          <view class="service-name">{{ orderInfo.serviceName }}</view>
          <view class="service-meta">{{ orderInfo.serviceDuration }} | {{ orderInfo.serviceArea }}</view>
          <view class="service-price">¥{{ orderInfo.servicePrice }}</view>
        </view>
      </view>
      <view class="service-desc">
        {{ orderInfo.serviceDesc }}
      </view>
    </view>
    
    <!-- 服务人员 -->
    <view class="info-card">
      <view class="card-title">服务人员</view>
      <view class="staff-info">
        <image class="staff-avatar" :src="orderInfo.staffAvatar" mode="aspectFill"></image>
        <view class="staff-detail">
          <view class="staff-name">{{ orderInfo.staffName }}</view>
          <view class="staff-meta">{{ orderInfo.staffTitle }} | {{ orderInfo.staffExperience }}</view>
          <view class="staff-rating">
            <uni-icons type="star-filled" size="14" color="#ff9500"></uni-icons>
            <text>{{ orderInfo.staffRating }}</text>
            <text class="rating-count">({{ orderInfo.staffRatingCount }}条评价)</text>
          </view>
        </view>
        <view class="call-btn" @click="callStaff">
          <uni-icons type="phone-filled" size="24" color="#ff7a45"></uni-icons>
        </view>
      </view>
    </view>
    
    <!-- 订单信息 -->
    <view class="info-card">
      <view class="card-title">订单信息</view>
      <view class="info-item">
        <text class="info-label">订单编号</text>
        <text class="info-value">{{ orderInfo.orderNo }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">下单时间</text>
        <text class="info-value">{{ orderInfo.orderTime }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">服务时间</text>
        <text class="info-value">{{ orderInfo.serviceDate }} {{ orderInfo.serviceTime }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">服务地址</text>
        <text class="info-value">{{ orderInfo.address }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">联系人</text>
        <text class="info-value">{{ orderInfo.contactName }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">联系电话</text>
        <text class="info-value">{{ orderInfo.contactPhone }}</text>
      </view>
      <view class="info-item" v-if="orderInfo.specialRequirements">
        <text class="info-label">特殊需求</text>
        <text class="info-value">{{ orderInfo.specialRequirements }}</text>
      </view>
      <view class="info-item" v-else>
        <text class="info-label">特殊需求</text>
        <text class="info-value empty">无</text>
      </view>
    </view>
    
    <!-- 费用明细 -->
    <view class="info-card">
      <view class="card-title">费用明细</view>
      <view class="fee-item">
        <text class="fee-label">基础服务费</text>
        <text class="fee-value">¥{{ orderInfo.basePrice }}</text>
      </view>
      <view class="fee-item" v-if="orderInfo.extraFee > 0">
        <text class="fee-label">大面积房屋附加费</text>
        <text class="fee-value">¥{{ orderInfo.extraFee }}</text>
      </view>
      <view class="fee-item discount" v-if="orderInfo.discount > 0">
        <text class="fee-label">新用户优惠</text>
        <text class="fee-value">-¥{{ orderInfo.discount }}</text>
      </view>
      <view class="fee-total">
        <text class="total-label">总计</text>
        <text class="total-value">¥{{ orderInfo.totalPrice }}</text>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-buttons" v-if="orderInfo.status === 'pending'">
      <button class="btn cancel-btn" @click="cancelOrder">取消订单</button>
      <button class="btn modify-btn" @click="modifyOrderTime">修改时间</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 订单信息
const orderInfo = ref({
  id: '1',
  orderNo: 'JB202306150001',
  orderTime: '2023-06-15 15:30',
  serviceName: '新居入住全屋深度清洁',
  serviceImage: '/static/images/service1.jpg',
  serviceDuration: '4-6小时',
  serviceArea: '80-120平米',
  servicePrice: '588',
  serviceDesc: '专业团队为您的新家提供全方位深度清洁，轻松搞定厨房、卫生间、客厅、卧室等所有区域。',
  serviceDate: '2023-06-20',
  serviceTime: '13:00-17:00',
  address: '北京市朝阳区建国路88号',
  contactName: '张先生',
  contactPhone: '138****6789',
  specialRequirements: '',
  staffName: '王阿姨',
  staffAvatar: '/static/images/staff1.jpg',
  staffTitle: '专业保洁员',
  staffExperience: '5年经验',
  staffRating: '4.9',
  staffRatingCount: '328',
  basePrice: '588',
  extraFee: '100',
  discount: '50',
  totalPrice: '638',
  status: 'pending', // pending, in_progress, completed, cancelled
  statusText: '待服务',
  statusClass: 'status-pending'
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 显示更多选项
const showMoreOptions = () => {
  uni.showActionSheet({
    itemList: ['投诉', '联系客服'],
    success: function(res) {
      if (res.tapIndex === 0) {
        // 投诉
        uni.navigateTo({
          url: '/pages/feedback/complaint'
        });
      } else if (res.tapIndex === 1) {
        // 联系客服
        uni.makePhoneCall({
          phoneNumber: '400-123-4567'
        });
      }
    }
  });
};

// 拨打服务人员电话
const callStaff = () => {
  uni.showModal({
    title: '联系服务人员',
    content: '是否拨打服务人员电话？',
    success: function(res) {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: '13800138000'
        });
      }
    }
  });
};

// 取消订单
const cancelOrder = () => {
  uni.showModal({
    title: '取消订单',
    content: '确定要取消该订单吗？',
    success: function(res) {
      if (res.confirm) {
        uni.showLoading({
          title: '处理中...'
        });
        
        // 模拟请求
        setTimeout(() => {
          uni.hideLoading();
          uni.showToast({
            title: '订单已取消',
            icon: 'success'
          });
          
          // 更新订单状态
          orderInfo.value.status = 'cancelled';
          orderInfo.value.statusText = '已取消';
          orderInfo.value.statusClass = 'status-cancelled';
          
          // 返回订单列表
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        }, 1000);
      }
    }
  });
};

// 修改订单时间
const modifyOrderTime = () => {
  uni.navigateTo({
    url: `/pages/order/modify-time?id=${orderInfo.value.id}`
  });
};

onMounted(() => {
  // 获取路由参数
  const eventChannel = getOpenerEventChannel();
  const orderId = eventChannel ? eventChannel.orderId : null;
  
  // 根据ID获取订单详情
  getOrderDetail(orderId);
});

// 获取订单详情
const getOrderDetail = (id) => {
  // 实际项目中应该调用API获取数据
  console.log('获取订单ID:', id);
  
  // 这里使用的是预设的数据
};
</script>

<style lang="scss" scoped>
.order-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx; // 为底部按钮留出空间
}

// 顶部导航栏
.nav-bar {
  display: flex;
  align-items: center;
  height: 90rpx;
  padding: 0 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  
  .back-btn, .more-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .page-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
  }
}

// 订单状态
.order-status {
  padding: 40rpx 30rpx;
  
  &.status-pending {
    background-color: #ff9500;
  }
  
  &.status-in_progress {
    background-color: #2196f3;
  }
  
  &.status-completed {
    background-color: #00c853;
  }
  
  &.status-cancelled {
    background-color: #f44336;
  }
  
  .status-content {
    color: #fff;
    
    .status-text {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }
    
    .status-desc {
      font-size: 28rpx;
      opacity: 0.9;
    }
  }
}

// 信息卡片
.info-card {
  background-color: #fff;
  margin: 20rpx 0;
  padding: 30rpx;
  
  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
}

// 服务信息
.service-info {
  display: flex;
  margin-bottom: 20rpx;
  
  .service-image {
    width: 160rpx;
    height: 120rpx;
    border-radius: 8rpx;
    margin-right: 20rpx;
  }
  
  .service-detail {
    flex: 1;
    
    .service-name {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .service-meta {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 10rpx;
    }
    
    .service-price {
      font-size: 32rpx;
      font-weight: bold;
      color: #ff7a45;
    }
  }
}

.service-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

// 服务人员
.staff-info {
  display: flex;
  align-items: center;
  
  .staff-avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }
  
  .staff-detail {
    flex: 1;
    
    .staff-name {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 6rpx;
    }
    
    .staff-meta {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 6rpx;
    }
    
    .staff-rating {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #ff9500;
      
      text {
        margin-left: 6rpx;
      }
      
      .rating-count {
        color: #999;
        margin-left: 6rpx;
      }
    }
  }
  
  .call-btn {
    width: 80rpx;
    height: 80rpx;
    border-radius: 40rpx;
    background-color: #fff8f6;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// 订单信息和费用明细
.info-item, .fee-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .info-label, .fee-label {
    font-size: 28rpx;
    color: #999;
  }
  
  .info-value, .fee-value {
    font-size: 28rpx;
    color: #333;
    max-width: 60%;
    text-align: right;
    
    &.empty {
      color: #999;
    }
  }
  
  &.discount {
    .fee-label, .fee-value {
      color: #ff7a45;
    }
  }
}

.fee-total {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
  padding-top: 20rpx;
  border-top: 1px solid #f0f0f0;
  
  .total-label {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
  }
  
  .total-value {
    font-size: 36rpx;
    font-weight: bold;
    color: #ff7a45;
  }
}

// 底部按钮
.bottom-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  
  .btn {
    width: 48%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 40rpx;
    font-size: 30rpx;
    
    &.cancel-btn {
      background-color: #fff;
      color: #666;
      border: 1px solid #ddd;
    }
    
    &.modify-btn {
      background-color: #ff7a45;
      color: #fff;
    }
  }
}
</style>